<template>
<div class="body-bg ">
  <div class="wrapper-page">
    <div class="panel-heading">
      <h3 class="text-content">
        <div>考研资料分享系统</div>
      </h3>
    </div>
    <div class="panel-body">
      <el-form
        :model="LoginFrom"
        status-icon
        :rules="LoginRules"
        ref="LoginFrom"
        class="demo-ruleForm"
      >
        <el-form-item prop="mobile">
          <el-input
            placeholder="手机号/工号"
            type="text"
            v-model="LoginFrom.mobile"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" style=" margin-top: 20px;">
          <el-input
            placeholder="密码"
            type="password"
            v-model="LoginFrom.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item style=" margin-top: 20px;">
          <template>
            <el-radio v-model="radio" label="0">普通用户</el-radio>
            <el-radio
              v-model="radio"
              label="1"
              
              style="margin-left: 20px;"
              >管理员
            </el-radio>
          </template>
        </el-form-item>
        <el-form-item style=" padding-left:30%; margin-top:25px;">
          <el-button
            type="success"
            class="botton-submit"
            @click="submitForm('LoginFrom')"
            style="background: #6e8cd7 ;"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
      <div style=" display: flex;flex-direction:row;margin-top:25px;">
        <div style=" display: flex;flex-direction:row ">
          <svg-icon iconClass="forgetpwd" className="forgetpwd" />
          <div
            style=" margin-top:4px;  color: rgb(83, 132, 224); cursor: pointer;"
          >
            忘记密码？
          </div>
        </div>
        <div
          style="color: rgb(83, 132, 224);margin-top:4px;margin-left: 55%;cursor: pointer;"
          @click="register"
        >
          注册
        </div>
      </div>
    </div>
  </div>

</div>
</template>

<script>
export default {
  name: "login",
  data() {
    var validateUser = (rule, value, callback) => {
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      
      if (!value) {
        return callback(new Error("请您输入手机号"));
        
      }else if(this.radio=="1"){
callback();
      } 
      
      else if (!reg.test(value)) {
        return callback(new Error("您输入手机号有误请重新输入"));
      }

      callback();
    };
    var validatePssword = (rule, value, callback) => {
      let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
      if (!value) {
        return callback(new Error("请您输入密码"));
      } else if (value.length >= 10) {
        return callback(new Error("您输入密码不能超过10位"));
      } else if (!reg.test(value)) {
        return callback(new Error("您输入密码格式有误"));
      }
      callback();
    };
    return {
      radio: "0",
      LoginFrom: {
        mobile: "",
        password: "",
      },
      LoginRules: {
        mobile: [{ validator: validateUser, trigger: "blur" }],
        password: [{ validator: validatePssword, trigger: "blur" }],
      },
    };
  },
  methods: {
    register() {
      this.$router.push({
        name: "Register",
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
            const formData = new FormData()
      formData.append('telphone',this.LoginFrom.mobile)
      formData.append('password', this.LoginFrom.password)
       formData.append('utype', this.radio)
     let reponse=await this.$store.dispatch('login/login',formData)
     if(reponse==0&&this.radio=="0" ){
         this.$router.push({
        name: "OneWord",
         });
      }else if(reponse==0&&this.radio=="1" ){
         this.$router.push({
        name: "UserManger",
         });
      }
        } else {
        this.$message({
          message: '请输您的账号和密码',
          type: 'warning'
        });
          return false;
        }
      });
    },
  },
  async created() {
    // let requestData = {
    //   telphone: "18312238308",
    //   password: "123456",
    //   utype: "0",
    // };
  },
};
</script>

<style lang="scss" scoped>

.wrapper-page {
  width: 420px;
  margin: 7.5% auto;
}

.panel-heading {
  width: 420px;
  height: 130px;
  border-radius: 6px 6px 0px 0px;
  background: url("../../assets/login.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
}
.text-content {
  width: 200px;
  margin: auto;

  padding-top: 80px;
  color: rgba(255, 255, 255, 0.925);
  div {
    font-size: 25px;
    font-weight: bold;
  }
}
.panel-body {
  background: white;
  padding: 30px;
  border-radius: 0px 0px 6px 6px;
}

.body-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background: #f5f5f5 !important;
}
.botton-submit {
  border: none;
  width: 140px;
  height: 46px;
}
.demo-ruleForm {
  margin-top: 25px;
}
svg {
  font-size: 25px;
}
</style>
